<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			html {
				font-size: 100px;
			}
			
			* {
				margin: 0;
				padding: 0;
			}

			.title {
				background: rgba(56,190,134,0);
				width: 100%;
				height: 50px;
				line-height: 50px;
				position: fixed;
				font-size: 16px;
				text-align: center;
				color: #fff;
				left: 0;
				top: 0;
			}

			.sub-title {
				height: 200px;
				line-height: 200px;
				background: url(img/bg.jpg);
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div class="title" id="title">标题</div>
		<div style="height: 20rem;background-color: aliceblue;">
			<div class="sub-title" id="sub-title">背景</div>
		</div>

		<script type="text/javascript">
			var title = document.getElementById('title');
			var stitle = document.getElementById('sub-title');
			window.onscroll = function() {
				var diff = stitle.offsetHeight - title.offsetHeight;
				//scrollTop就是触发滚轮事件时滚轮的高度
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if(scrollTop < diff) {
					var o = scrollTop / diff;
					title.style = 'background: rgba(56,190,134,'+o+');';
				}else {
					var o =  scrollTop / diff;
					title.style = 'background: rgba(56,190,134,1);';
				}
			}
		</script>
	</body>
</html>
